<template>
  <div class="info">
    <h2>项目所有成员</h2>
    <div class="member">
      <a-table :columns="columns" :data-source="data" bordered :pagination="false">
        <template #headerCell="{ column }">
          <template v-if="column.key === 'name'">
            <span>{{ column.name }}</span>
          </template>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'name'">
            <span>
              {{ record.name }}
            </span>
          </template>
          <template v-if="column.key === 'auth'">
            <span>
              {{ record.userRole }}
            </span>
          </template>
          <template v-if="column.key === 'joinTime'">
            <span>
              {{ record.createTime }}
            </span>
          </template>
          <template v-else-if="column.key === 'action'">
            <span>
              <a-button type="default" @click="showAuthChangeModal(record)">修改权限</a-button>
              <span style="padding: 0 8px"></span>
              <a-button type="default" danger @click="removeFromProgram(record.userId)">移出团队</a-button>
            </span>
          </template>
        </template>
      </a-table>
    </div>
    <h2 style="margin-top: 25px;">邀请成员加入</h2>
    <a-card style="margin-top: 10px;padding: 15px 0;">
      <div class="invite">
        <div class="top">
          <p>用户权限</p>
          <a-select v-model:value="auth" style="width: 120px">
            <a-select-option value="reader">reader</a-select-option>
            <a-select-option value="editor">editor</a-select-option>
            <a-select-option value="admin">admin</a-select-option>
          </a-select>
          <a-button type="primary" style="margin-left: 150px; margin-bottom: 50px;" @click="generate">生成邀请链接
          </a-button>
          <p>邀请链接</p>
          <a-input v-model:value="link" placeholder="-" :maxlength="50" :disabled="!canCopy"/>
          <span style="color: rgb(128,128,128)">邀请链接有效期：一天</span>
          <a-tooltip v-if="!canCopy" title="请先生成邀请链接" color="orange" placement="bottomRight" trigger="click">
            <a-button style="margin-top: 15px; margin-left: 150px;text-align: right;" @click="copyLink" :disabled="!canCopy">复制邀请链接</a-button>
          </a-tooltip>
          <a-button v-else style="margin-top: 15px; margin-left: 150px;text-align: right;" @click="copyLink">复制邀请链接</a-button>
        </div>
        <div class="qr">
          <h3>邀请二维码</h3>
          <a-space direction="vertical" align="center">
            <a-qrcode :value="link" :status="status" @refresh="message.warn('请先生成邀请链接')"/>
          </a-space>
        </div>
      </div>
    </a-card>
  </div>
  <a-modal v-model:open="open" title="修改权限" cancel-text="取消" ok-text="确认"
           destroy-on-close @ok="handleOk">
    <a-select v-model:value="user.userRole" size="middle" style="width: 120px">
      <a-select-option value="reader">reader</a-select-option>
      <a-select-option value="editor">editor</a-select-option>
      <a-select-option value="admin">admin</a-select-option>
    </a-select>
  </a-modal>
</template>

<script setup lang="ts">
import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import axios from "@/axios";
import {message} from "ant-design-vue";

// 邀请用户权限
const auth = ref('reader');
const programId = useRoute().params.id;
// 二维码状态
const status = ref('expired');
// 邀请链接
const link = ref(window.location.origin);
//修改权限
const open = ref<boolean>(false);
const canCopy = ref(false);

const columns = [
  {
    name: '昵称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '权限',
    dataIndex: 'auth',
    key: 'auth',
  },
  {
    title: '加入时间',
    dataIndex: 'joinTime',
    key: 'joinTime'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
  },
];

let user = ref({
  userRole: '',
  id: '',
  programId: '',
  userId: '',
})

let data = ref();

onMounted(() => {
  getMember();
})

// 修改权限
const showAuthChangeModal = (userItem) => {
  // 保存原有的权限值
  user.value.userRole = userItem.userRole;
  user.value.id = userItem.id;
  user.value.programId = userItem.programId;
  user.value.userId = userItem.userId;
  console.log(user.value)
  open.value = true;
};

const handleOk = () => {

  axios.put(`/member/${programId}`, user.value).then((response) => {
    message.success(response.message);
    getMember()
  })
  open.value = false;
};


// 生成邀请链接
const generate = () => {
  axios.get(`/invite/${programId}`, {
    params: {
      "auth": auth.value
    }
  }).then((response) => {
    link.value = window.location.origin + '/#/join/' + response.data;
    message.success(response.message);
    status.value = 'active';
    canCopy.value = true;
  })
}

// 获取项目成员
const getMember = () => {
  axios.get(`/member/${programId}`).then((response) => {
    data.value = response.data;
  })
}

// 删除项目成员
const removeFromProgram = (userId) => {
  axios.delete(`/member/${programId}`, {
    params: {
      userId: userId
    }
  }).then((response) => {
    message.success(response.message);
  })
}

// 复制邀请链接到剪切板
const copyLink = () => {
  // 创建临时 textarea 元素并设置文本内容
  const tempTextArea = document.createElement('textarea');
  tempTextArea.value = link.value;
  document.body.appendChild(tempTextArea);

  // 选择并复制文本
  tempTextArea.select();
  document.execCommand('copy');

  // 移除临时 textarea 元素
  document.body.removeChild(tempTextArea);

  // 提示信息
  message.success("复制成功");
}
</script>

<style scoped lang="less">

.info {
  width: 100%;
  height: 100%;
  padding: 25px 50px;
  color: #404653;
  font-size: 18px;

  .invite {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 20px;

    .qr {
      display: flex;
      flex-direction: column;
    }
  }
}
</style>